<script setup>
// import { RouterLink, RouterView } from 'vue-router'
import axios from 'axios'
import { onMounted, ref } from 'vue'

import '../src/assets/iconfont.css'
const Info = ref('')

import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
// const getInfo = () => {
//   axios
//     .get('http://localhost:3000/api/get')
//     .then((res) => {
//       console.log(res)
//       Info.value = res.data
//       console.log(Info.value)
//       userStore.setInfo(res.data)
//     })
//     .catch((err) => {
//       console.log(err)
//     })
// }

onMounted(() => {
  userStore.getInfo()
})
</script>

<template>
  <div class="app">
    <router-view></router-view>
    <div class="bottomNav">
      <router-link to="/">
        <div style="font-size: 33px" class="iconfont icon-wenzhang"></div>
        文章
      </router-link>
      <router-link to="/mypublish">
        <div style="font-size: 23px" class="iconfont icon-fabu1"></div>
        发布</router-link
      >
      <router-link to="/myinfo">
        <div style="font-size: 23px" class="iconfont icon-wode2"></div>
        我的</router-link
      >
    </div>
  </div>
</template>

<style scoped>
.app {
  /* margin: 0 auto;
  max-width: 750px; */
}
@media (min-width: 750px) {
  .app {
    margin: 0 auto;
    max-width: 750px;
  }
  .bottomNav {
    width: 750px !important;
  }
}
.bottomNav {
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;

  padding: 5px 0;
  text-align: center;
}
.bottomNav a {
  text-decoration: none;
  color: #000;
}
.bottomNav a:hover {
  color: #007bff;
}
</style>
